<template>
  <div>
    <Tabs type="border-card"
      value="china-map">
      <TabPane label="看看你在哪"
        name="globe-layer">
        <globe-layers :id="'world'"
          :width="'1500px'"
          :height="'800px'">
        </globe-layers>
      </TabPane>
      <TabPane label="一键买房"
        name="china-map">
        <Input v-model="house"
          placeholder="请输入房产"
          class="input-with-btn">
        <Button slot="append"
          @click="addHouse">买房子</Button>
        </Input>
        <china-map ref="myHouseMap"
          :houses="housesArr"
          :id="'houseMap'"
          :width="'1500px'"
          :height="'800px'">
        </china-map>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
const AK_TOKEN = 'YuKHh7e3Ag9v6jjrQsul9fTSwr3esAwa'
import GlobeLayers from '@/components/charts/GlobeLayers'
import ChinaMap from '@/components/charts/ChinaMap'
import $ from 'jquery'
export default {
  name: 'Maps',
  components: {
    GlobeLayers,
    ChinaMap
  },
  data() {
    return {
      house: '',
      housesArr: []
    }
  },
  methods: {
    addHouse() {
      if (this.house) {
        let url = `http://api.map.baidu.com/geocoder/v2/?output=json&ak=${AK_TOKEN}&address=${
          this.house
        }&callback=?`
        console.log(url)
        let self = this
        $.getJSON(url, function(res) {
          if (res.status === 0) {
            let loc = res.result.location
            self.housesArr.push({
              name: self.house,
              value: [loc.lng, loc.lat]
            })
            // 执行函数，显示目的地
            // drawMap()
          } else {
            this.$message.error('百度地图找不到该地方！')
          }
        })
      } else {
        this.$message.error('请输入地址')
      }
    }
  },
  mounted() {},
  watch: {
    housesArr: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.$refs['myHouseMap'].initChart()
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.input-with-btn {
  width: 200px;
}
</style>
